<template>
    <div>
        <div class="brindlist-right activity-right">
            <h3>品牌列表</h3>
            <el-input style="width:25%;" class='input' @keyup.enter.native="getBrandLis(page)" prefix-icon="el-icon-search" clearable v-model="searchName"  placeholder="请输入品牌名称"></el-input>
            <el-button type="primary" @click.enter="getBrandLis(page)" icon="el-icon-search">搜索</el-button>
            <el-button class='right' type="primary" @click="addBrand">添加品牌</el-button>
            <el-table class="brand table-common" ref="multipleTable" :data=" data " style="width: 100%">
                <el-table-column prop="url" label="品牌LOGO" width="180">
                    <template slot-scope="scope">
                        <img :src="scope.row.url" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="品牌名称" width="150">
                </el-table-column>
                <el-table-column prop="id" label="品牌id" width="150">
                </el-table-column>
                <el-table-column prop="story" label="品牌介绍" class="history" width="600">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editBrand(scope.row)" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <section class="pagination" v-if=" total > 10">
                <el-pagination background layout="total,prev, pager, next,jumper" :page-count="Math.ceil(total/10)" :total="total" :page-size="10" :current-page.sync="page" @current-change="handlePageChange">
                </el-pagination>
            </section>

        </div>
    </div>
</template>
<script>
import { getBrandList } from "../../data/postData";
export default {
    data() {
        return {
            Page: JSON.parse(localStorage.getItem("Page")),
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            page: 1,
            size: 10,
            total: 0,
            data: null,
            total1: null,
            searchName: ''
        };
    },
    mounted() {
        let { brandListPage,barndListName } = this.$store.state.brand;
        this.page = brandListPage || 1;
        this.searchName = barndListName
        this.getBrandLis(this.page);
    },
    methods: {
        getBrandLis(page) {
            var params = {
                data: {
                    page: page,
                    size: 10,
                    name: this.searchName
                }
            };
            this.$store.dispatch('saveBrandListName',this.searchName)
            this.$fetch.post(getBrandList, params).then(res => {
                this.data = res.data;
                this.total = res.total;
            }).catch(err => {
                console.warn(err.message);
            });
        },
        //新增品牌
        addBrand() {
            this.$router.push({ path: "/addBrand" });
        },
        //编辑品牌
        editBrand(data) {
            this.$router.push({ path: "/editBrand/" + data.id });
            localStorage.setItem("Page", JSON.stringify({ page: this.page }));
        },
        handlePageChange(page) {
            this.page = page;
            this.getBrandLis(this.page);
            this.$store.dispatch("saveBrandListPage", this.page);
        },
    }
};
</script>
<style scoped lang="less">
.brindlist-right {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    margin-bottom: 40px;
    float: left;
    h3 {
        margin: 20px 0 20px 0;
    }
    .right {
        float: right;
        margin: 10px;
    }
    .select_type {
        margin-bottom: 20px;
        span {
            margin-right: 10px;
        }
    }
}
.el-table__body-wrapper {
    margin-top: 15px;
    img {
        width: 60%;
    }
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.clearfix {
    zoom: 1;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.el-input,
.el-date-editor {
    width: 150px;
}
.check-sure {
    margin-left: 300px;
    position: relative;
    top: -8px;
    left: 0;
}
.lable {
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 75px;
    text-align: left;
}
.toget {
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}
.time-input {
    width: 100px;
}
.lableCase0 {
    width: 420px;
    padding-right: 20px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
}
.lableCase {
    width: 420px;
    padding-right: 20px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
}
.search-input {
    margin: 5px;
    width: 200px;
}
.pagination {
    width: 100%;
    margin: 40px auto;
    text-align: center;
}
//店长新建店员 storeNo 取店长的
</style>